<template>
  <view class="order-card mx-20 mt-24">
    <view class="item px-20 pt-16 pb-32 bg-white">
      <view @click="onOrderDetail(item)">
        <view class="flex justify-between my-20 f-24">
          <view class="order-items">{{ item.shopName }}</view>
          <view class="f-24" :class="item.status != 50 ? 'status-active' : 'status-text'">{{ statusText(item.status) }}
          </view>
        </view>
        <view v-for="(nitem, index) in item.productList" :key="index">
          <view class="order-itemscon">
            <image class="cover mr-28" :src="nitem.image" />
            <view class="py-24 flex justify-between items-center order-itemscon-right">
              <view class="">
                <view class="cart-title flex justify-start items-center">
                  <view class="tit">{{ nitem.name }}</view>
                </view>
                <view class="flex justify-between">
                  <text class="price1 f-32-B">￥{{ nitem.price }}</text>
                </view>
              </view>
              <div class="order-count">
                共{{ nitem.quantity }}件
              </div>
            </view>
          </view>
        </view>
        <view class="shop flex justify-between items-center">
          <view class="f-28 times">{{ item.createTime }}</view>
          <view class="flex items-center price">
            <text class="f-28">共{{ item.totalQuantity }}件商品</text>
            <text class="f-28">实付金额:</text>
            <text class="f-28 coloryellow">￥{{ item.orderAmount }}</text>
          </view>
        </view>
      </view>
      <view class="submit flex justify-end items-center mt-24">
        <!-- 1待审核 联系客服、取消订单 2待发货 3待收货 确认收货 4已完成 再下一单、申请调货 5退换货 联系客服、再下一单、申请调货  6已关闭 再下一单 -->
        <view class="btn tc f-24" v-if="item.status == 1||item.status == 5" @click.stop="Concontrctkefu(item)">联系客服</view>
        <view class="btn tc f-24" v-if="item.status == 1" @click.stop="ConCancelPayOrder(item)">
          <up-loading-icon class="loading" color="#fff" size="16" :show="buttonloading"></up-loading-icon><text>取消订单</text>
        </view>
        <view class="btn ml-20 tc f-24" v-if="item.status == 3 || item.status == 4 || item.status == 5"
          @click.stop="ConOrderLogistics(item)">查看物流</view>
        <view class="btn ml-20 tc f-24" v-if="item.status == 4 ||item.status == 5||item.status == 6" @click.stop="CononAgainOrderOrder(item)">
          <up-loading-icon class="loading" color="#fff" size="16" :show="buttonloading"></up-loading-icon><text>再下一单</text>
        </view>
        <view class="btn ml-20 tc f-24" v-if="userInfo1Storge.isSupportChange&&item.status == 4||item.status == 5" @click.stop="ConconfirmApplyAdjust">
          <up-loading-icon class="loading" color="#fff" size="16" :show="buttonloading"></up-loading-icon><text>申请调货</text></view>
        <view class="buy-btn ml-20 tc f-24" v-if="item.status == 3" @click.stop="CononReceiveOrder"><up-loading-icon class="loading" color="#fff" size="16" :show="buttonloading"></up-loading-icon><text>确认收货</text></view>
      </view>
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(["cancelpay","againorder", "logistics", "detail"]);
import { getUserInfo } from "@/service";
let userInfo1Storge = getUserInfo();
const props = defineProps({
  item: {},
  buttonloading:{
    type:Boolean,
    default:false
  }
});

// 取消订单
const ConCancelPayOrder = (item) => {
  emit("cancelpay", item);
};

// 再下一单
const CononAgainOrderOrder = (item) => {
  emit("againorder", item);
};

// 确认收货
const CononReceiveOrder = (item) => {
  emit("onreceive", item);
}

// 联系客服
const Concontrctkefu = (item) => {
  emit("contrctkefu", item);
};


// 查看物流
const ConOrderLogistics = (item) => {
  emit("logistics", item);
};

// 申请调货
const ConconfirmApplyAdjust = (item) => {
  emit("confirmapplyadjust", item);
};

// 订单详情
const onOrderDetail = (item) => {
  emit("detail", item.orderId);
};


// 订单状态
const statusText = (status) => {
  let text = "";
  switch (status) {
    case 1:
      text = "待审核";
      break;
    case 2:
      text = "待发货";
      break;
    case 3:
      text = "待收货";
      break;
    case 4:
      text = "已完成";
      break;
    case 5:
      text = "退换货";
      break;
    case 6:
      text = "已关闭";
      break;

    default:
      break;
  }
  return text;
};
</script>

<style lang="scss" scoped>
.order-card {
  .order-items{
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(44, 44, 44, 1);
  }
  .status-text {
    color: #666666;
  }

  .status-active {
    color: rgba(214, 142, 68, 1);
  }

  .item {
    background: #ffffff;
    border-radius: 30rpx;

    .shop {
      width: 100%;
      margin-top: 12rpx;
      margin-bottom: 12rpx;
      .times{
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.6);
      }
      .price {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.6);
        .coloryellow{
          color: rgba(214, 142, 68, 1);
        }
      }
    }

  }

  .img {
    margin-right: 12rpx;
    width: 40rpx;
    height: 40rpx;
    vertical-align: text-bottom;
  }

  .cover {
    width: 140rpx;
    height: 140rpx;
    border-radius: 16rpx;
  }

  .title {
    height: 74rpx;
  }

  .type {
    padding: 0rpx 20rpx;
    box-sizing: border-box;
    height: 56rpx;
    line-height: 56rpx;
    background: #6a1b99;
    color: #ffffff;
    border-radius: 16rpx 0rpx 16rpx 0rpx;
  }

  .submit {
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;

    .other {
      color: #666666;
    }
  }

  .btn {
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #ffffff;
    color: rgba(0, 0, 0, 0.26);
    border-radius: 12rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.26);
    margin-left: 12rpx;
    display: flex;
      justify-content: center;
      align-items: center;
  }

  .buy-btn {
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #ffffff;
    color: rgba(214, 142, 68, 1);
    border-radius: 52rpx;
    border: 2rpx solid rgba(214, 142, 68, 1);
    display: flex;
      justify-content: center;
      align-items: center;
  }

  .order-itemscon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12rpx;
    .order-itemscon-right{
      display: flex;
      align-items: center;
      width: calc(100% - 140rpx);
      .order-itemscon-right-price{
        color: rgba(214, 142, 68, 1);
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
      .order-itemscon-right-count{
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .cart-title {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(0, 0, 0, 1);
      .tit{
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: rgba(0, 0, 0, 1);
      }
    }

    .price1 {
      color: rgba(0, 0, 0, 1);
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;

    }

    .order-count {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(0, 0, 0, 0.6);
    }
  }
}
</style>
